<template>
	<div>
		<van-popup v-model="changeDeletaIiShow">
			<div class="forget-pass">
				<div class="pc-dialog-slot">
					<div class="delete-icon" @click="changeDeletaIiShow = false"><i></i></div>
					<div class="dialog-content">
						<div class="forget-content">
							<p class="color-yellow">
								binding Line account Email
							</p>
							<p style="color: rgb(117, 117, 117);">
								When sending the verification code, will register the account directly according to your
								email password
							</p>
							<el-form id="el-form-forgot" style="text-align: left;" ref="binding" :model="bindingForm"
								:rules="bindingrules" label-width="0px" class="login-box">
								<el-form-item prop="email">
									<el-input ref="emailnew" type="text" :placeholder="$t('login.inputEmail')"
										v-model="bindingForm.email" />
								</el-form-item>
								<el-form-item prop="newPassword">
									<el-input ref="passwardnew" type="text" :placeholder="$t('login.NewPassword')"
										v-model="bindingForm.newPassword" />
								</el-form-item>
								<div style="display: flex;justify-content: space-between;">

									<el-form-item style="width:55%;" prop="VerificationCode">
										<el-input type="text" ref="yzmValue" id="last-white"
											:placeholder="$t('login.inputemailcode')"
											v-model="bindingForm.VerificationCode">
										</el-input>
									</el-form-item>
									<div class="sendPass van-multi-ellipsis--l2" @click="registerUser">
										{{$t('login.Sendcodetoemail')}}
									</div>
								</div>
							</el-form>
							<button class="forget-btn bg-yellow" @click="bindingPasswordSubmit">
								{{$t('application.submit')}}
							</button>
						</div>
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	//  点击发送邮箱验证码的时候 判断是否输入了 密码 然后 给用户直接注册 然后再发送验证码 
	export default {
		data() {
			return {
				// 忘记密码
				bindingForm: {
					email: '',
					newPassword: '',
					VerificationCode: '',
				},
				bindingrules: {
					email: [{
						type: 'email',
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Input Email' : '電子メールの入力',
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Input password' : 'パスワードの入力',
						trigger: 'blur', 
					},{
						min:6,
						max:12,
						message: this.$i18n.locale == 'en-US' ? 'password length 6 to 12' : 'パスワードの長さ6から12',
						trigger: 'blur', 
					}],
					VerificationCode: [{
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Please input vertification code' :
							'認証コードを入力してください',
						trigger: 'blur'
					}],
				},
				
				changeDeletaIiShow:false
			}
		},
		created() {},
		mounted() {},
		methods: {
			registerUser() {
				this.$refs.binding.validateField('email', (flag) => {
					if (flag) {
						return
					}
					this.$refs.binding.validateField('newPassword', (flag) => {
						if (flag) {
							return
						}
						console.log('12312')
					})
				})
			},
			// 发送短信验证码
			sendEmailCode(email) {
				this.$refs.binding.validateField('email', (flag) => {
					if (flag) {
						return this.showToast('please input correct email', '正しいメールを入力してください')
					} else {
						this.$axios({
							url: 'user/siteUser/getVerificationCode',
							method: 'post',
							params: {
								email,
								type: 1
							}
						}).then(res => {
							this.showToast('Has been sent', '送信済み')
							console.log(res)
						})
					}
				})
			},
			bindingPasswordSubmit() {

			}
		},
		components: {}
	}
</script>

<style lang='scss' scoped>
	.pc-dialog-slot {
		width: 500px;
		border-radius: 5px;
		background-color: #fff;

		@media screen and (max-width: 900px) {
			width: 16rem;
		}
	}

	.pc-dialog-slot .delete-icon {
		position: relative;
		height: 35px;
		background-color: #ff5900;
	}

	.pc-dialog-slot .delete-icon>i {
		position: absolute;
		right: 10px;
		top: 10px;
		display: block;
		width: 15px;
		height: 15px;
		background-color: #fff;
		border-radius: 50%;
		text-align: center;
		background: url(https://www.rebatest.com/pingjiayi/App/image/2_03-375.png) 0 0 no-repeat;
		background-size: cover;
	}

	.pc-dialog-slot .dialog-content {
		padding: 0.75rem;
		font-size: 14px;
		color: #575757;
		text-align: center;
	}

	.forget-pass p {
		text-align: center;
		font-size: 0.75rem;
		line-height: 1.5;
	}

	.forget-pass .forget-btn {
		display: block;
		width: 170px;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.7rem;
		color: #fff;
		text-align: center;
		border: none;
		margin: 2rem auto 0;
	}

	.bg-yellow {
		background-color: #ffaf52;
	}

	.sendPass {
		height: 40px;
		line-height: 40px;
		min-width: 131px;
		border: 0.05rem solid #b5b5b5;
		display: inline-block;
		left: 188px;
		top: 0px;
		text-align: center;
		font-size: 12px;
		color: #b5b5b5;
		cursor: pointer;
	}
</style>
